import React, { useCallback, useState } from "react";
import Zoom from "react-medium-image-zoom";
import "react-medium-image-zoom/dist/styles.css";
import "./styles.css";

const ZoomableImage = ({ src, alt, ...props }) => {
  const [isZoomed, setIsZoomed] = useState(false);
  
  // 处理点击事件
  const onClick = useCallback((e) => {
    e.preventDefault(); // 防止默认的双击选中文本
    setIsZoomed(prev => !prev);
  }, []);
  
  // 处理关闭事件
  const handleZoomChange = useCallback((shouldZoom) => {
    setIsZoomed(shouldZoom);
  }, []);


  return (
    <span className="zoomable-image-container">
      <Zoom
        isZoomed={isZoomed}
        onZoomChange={handleZoomChange}
      >
        <img
          src={src}
          alt={alt}
          className="zoomable-image"
          onClick={onClick}
          {...props}
        />
      </Zoom>
    </span>
  );
};

export default ZoomableImage;